<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">hello box</div>
    <script>
      const box = document.getElementById("box");

      box.onclick = function () {
        // 获取box的内容
        const boxContent = this.textContent;
        // 创建textarea 将box中的文字放到 textarea 中
        const textarea = `<textarea id="textareaNode" onclick="event.stopPropagation();" data-textarea-blur  data-textarea-enter>${boxContent}</textarea>`;
        // box的内容换成textarea
        this.innerHTML = textarea;
        // 让textarea自动的获取焦点
        textareaNode.focus();
      };

      // 代理 textarea 的失去焦点事件
      document.addEventListener("focusout", function (e) {
        const target = e.target;
        const textareaBlur = target.dataset.textareaBlur;
        if (textareaBlur === undefined) {
          return;
        }
        // 获取textarea的内容
        const textContent = target.value;
        // 回填到box中
        box.innerHTML = textContent;
      });

      // 代理 onkeydown 的失去焦点事件
      document.addEventListener("keydown", function (e) {
        if (e.key !== "Enter") {
          return;
        }
        const target = e.target;
        const textareaEnter = target.dataset.textareaEnter;
        if (textareaEnter === undefined) {
          return;
        }

        target.blur();
      });

      /*
        1. 点击box
        2. 创建textarea文本框
        3. 将box中的文字放到 textarea 中
        4. 编辑文字
        5. 用户按下回车或失去焦点后，将textare中的文字回填到box中
      */
    </script>
  </body>
</html>
